<template>
	<view>
		<view class="f0"></view>
		<!-- F1：顶部搜索条 -->
		<view class="f1">
			<!-- 左侧：后退按钮 -->
			<uni-icons @click="goBack" class="back" type="back" size="50rpx" color="#fff" />
			<!-- 主体：搜索框 -->
			<uni-search-bar class="search" v-model="kw" @confirm="beginSearch" @clear="clearResult" @input="doInput" placeholder="请输入商品关键字" cancelButton="none" />
		</view>
		<!-- F2：搜素结果列表 -->
		<uni-list>
			<!-- ellipsis：省略号，可取值：1或2 -->
			<!-- thumb：缩略图 -->
			<!-- thumbSize：缩略图尺寸 -->
			<!-- link：作用1：增加右侧的箭头   作用2：增加点击反馈   作用3：指定跳转方式 -->
			<!-- to：跳转地址 -->
			<uni-list-item
				v-for="{ lid, title, pic } in products"
				:key="lid"
				:title="title"
				:ellipsis="1"
				:thumb="base + pic"
				thumbSize="lg"
				link
				:to="`/pages/details/details?pid=${lid}`"
			/>
		</uni-list>
		<text v-show="showNoProducts" style="text-align: center;">没有查询到相关商品</text>
		<button class="has-more" @click="goToList" v-show="hasMore" type="default">查看更多</button>
		<!-- F3：搜索建议 -->
		<uni-card class="search-suggest" title="热门搜索" is-full>
			<view class="card-content" @click="searchBySuggest">
				<!-- TODO: 此处的建议应该来自于服务器端的接口数据 -->
				<uni-tag class="tag" text="苹果" data-kw="苹果" type="error" />
				<uni-tag class="tag" text="Apple" data-kw="Apple" type="warning" />
				<uni-tag class="tag" text="燃7000" data-kw="燃7000" type="success" />
				<uni-tag class="tag" text="小新" data-kw="小新" type="primary" />
				<!-- inverted：是否采用空心标签		 -->
				<uni-tag class="tag" text="笔记本" data-kw="笔记本" type="error" inverted />
				<uni-tag class="tag" text="工作站" data-kw="工作站" type="warning" inverted />
				<uni-tag class="tag" text="雷神7500" data-kw="雷神7500" type="success" inverted />
				<uni-tag class="tag" text="MacBook" data-kw="MacBook" type="primary" inverted />
				<!-- circle：是否是圆角的 -->
				<uni-tag class="tag" text="联想" data-kw="联想" type="error" circle />
				<uni-tag class="tag" text="戴尔" data-kw="戴尔" type="warning" circle />
				<uni-tag class="tag" text="小米" data-kw="小米" type="success" circle />
				<uni-tag class="tag" text="神舟" data-kw="神舟" type="primary" circle />
				<!-- inverted + circle		 -->
				<uni-tag class="tag" text="游戏" data-kw="游戏" type="error" inverted circle />
				<uni-tag class="tag" text="平板" data-kw="平板" type="warning" inverted circle />
				<uni-tag class="tag" text="Thinkpad" data-kw="Thinkpad" type="success" inverted circle />
				<uni-tag class="tag" text="E430C" data-kw="E430C" type="primary" inverted circle />
			</view>
		</uni-card>
		<!-- F4：返回顶部 -->
	</view>
</template>

<script>
import { productList, base } from '@/service';
export default {
	data() {
		return {
			base, //把service中导出的变量设置为当前组件的数据
			kw: '', //用户在搜索框中输入的内容 —— keyword
			products: [], //根据关键字查询到的商品列表
			hasMore: false, //还有更多数据可以显示吗？
			showNoProducts: false, //是否显示“没有查询到相关商品”
			timer: null //防抖定时器
		};
	},
	methods: {
		searchBySuggest(e) {
			//事件委托：由父元素来处理众多子元素的单击事件
			//通过事件对象找到事件源头对象，再找该对象的数据集合
			let kw = e.target.dataset.kw;
			if (kw) {
				this.kw = kw;
			}
		},
		doInput() {
			if (this.timer) {
				//如果之前已经启动了定时器，必须先清除
				clearTimeout(this.timer); //停止定时器的工作
				this.timer = null; //清空定时器变量
			}
			this.timer = setTimeout(async () => {
				let kw = this.kw.trim();
				if (kw === '') {
					//如果用户输入内容为空，则不发请求了
					return;
				}
				//向服务器端接口发起异步请求，获取商品列表
				let { data, pageCount, pno } = await productList(1, kw);
				this.products = data; //查询到的商品列表
				this.hasMore = pno < pageCount; //如果当前页号小于总页数，就还有更多数据
				this.showNoProducts = data.length === 0; //如果查询结果集没有商品，则显示“没有查询到相关商品”，否则不显示
			}, 1000);
		},
		clearResult() {
			//清除之前的查询结果：可能1-商品列表存在数据  可能2-当前正在显示“没有查询到相关商品”
			this.products = []; //清除当前的查询结果
			this.showNoProducts = false; //不显示“当前没有查询到相关商品”
			this.hasMore = false; //不显示“显示更多”按钮
		},
		goToList() {
			//导航跳转到商品列表页，提交查询参数：kw
			uni.navigateTo({
				url: '/pages/list/list?kw=' + this.kw.trim()
			});
		},
		goBack() {
			//导航返回
			uni.navigateBack();
		},
		async beginSearch() {
			//如果用户当前的输入为空，则弹出吐司提示框
			let kw = this.kw.trim();
			if (kw === '') {
				uni.showToast({
					title: '关键字不能为空', //提示文字
					icon: 'none', //提示图标：success、error、none、loading
					duration: 3000 //持续时长
				});
				return; //退出当前方法，不再继续执行
			}
			//向服务器端接口发起异步请求，获取商品列表
			let { data, pageCount, pno } = await productList(1, kw);
			this.products = data; //查询到的商品列表
			this.hasMore = pno < pageCount; //如果当前页号小于总页数，就还有更多数据
			//如果查询结果集没有商品，则显示“没有查询到相关商品”，否则不显示
			if (data.length === 0) {
				this.showNoProducts = true;
			} else {
				this.showNoProducts = false;
			}
		}
	}
};
</script>

<style lang="scss">
.f0 {
	height: var(--status-bar-height);
	width: 100%;
	background-color: $uni-color-primary;
}
.f1 {
	background-color: $uni-color-primary;
	height: 44px;
	//弹性容器主轴方向：横向
	flex-direction: row;
	//子元素在交叉轴对齐方式：居中
	align-items: center;
	// padding: $uni-spacing-col-base  $uni-spacing-row-base;
	padding-top: $uni-spacing-col-lg * 4;
	padding-bottom: $uni-spacing-col-lg * 2;
	padding-left: $uni-spacing-row-sm;
	padding-right: $uni-spacing-row-base;
	.search {
		flex: 1;
		margin-left: $uni-spacing-row-base;
	}
}

.has-more {
	background-color: $uni-border-color;
	color: $uni-text-color;
	margin: $uni-spacing-col-base 0;
	width: 100%;
}

.search-suggest {
	margin-top: $uni-spacing-col-lg !important;
	.card-content {
		//弹性容器主轴方向为：横向
		flex-direction: row;
		//弹性容器允许子元素换行
		flex-wrap: wrap;
		.tag {
			margin-right: $uni-spacing-row-base;
			margin-bottom: $uni-spacing-col-base;
		}
	}
}
</style>
